<!-- src/Components/LoginDialog.vue -->
<template>
  <el-dialog
    v-model="visible"
    width="900px"
    @close="closeDialog"
    custom-class="login-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="login-content">
      <div class="qr-section">
        <div class="qr-placeholder">二维码区域</div>
        <p>请使用哔哩哔哩客户端扫码登录</p>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="form-section">
        <el-radio-group v-model="loginMode" size="large">
          <el-radio-button label="密码登陆" value="passwordLogin" />
          <el-radio-button label="短信登陆" value="smsLogin" />
        </el-radio-group>

        <el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="login-form-box" label-width="100px"
          :status-icon="true"
          :show-message="false"
        >
          <div class="login-form-box-input-group">
            <el-form-item label="账号" prop="username">
              <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-divider></el-divider>
            <el-form-item v-if="loginMode === 'passwordLogin'" label="密码" prop="password">
              <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item v-else label="验证码" prop="password" class="passwordFormItem">
              <el-input type="password" v-model="loginForm.password" placeholder="请输入验证码">
              </el-input>
              <el-button text @click="handleGetSmsCode">获取验证码</el-button>
            </el-form-item>
          </div>
          <div class="form-actions">
            <el-button>注册</el-button>
            <el-button type="primary" @click="submitForm">登录</el-button>
          </div>
        </el-form>
        <div class="other-login">
          <span>其他方式登录</span>
          <i class="iconfont icon-weixin"></i>
          <i class="iconfont icon-weibo"></i>
          <i class="iconfont icon-qq"></i>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import User from '@/utils/User/User.js'
import {AuthApi} from "@/apis/authApi.js";
import axios from "axios";
import {useRouter} from "vue-router";
// 定义props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const router = useRouter();
// 登陆模式
const loginMode = ref('passwordLogin')

// 定义emits
const emit = defineEmits(['update:pageStatus'])

// 双向绑定visible属性
const visible = ref(props.modelValue)

watch(() => props.modelValue, (newValue) => {
  console.log(newValue)
  visible.value = newValue
})

const closeDialog = () =>{
  emit('update:pageStatus',false)
}

const loginForm = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
}

const loginFormRef = ref(null)

const submitForm = async () => {
  if (loginFormRef.value) {
    loginFormRef.value.validate( async (valid) => {
      if (valid) {
        try {
          await User.login(loginForm.username,loginForm.password);
          ElMessage.success('登陆成功');
          visible.value = false;
          router.go(0);
        } catch (e) {
          ElMessage.error(e.message);
        }
      } else {
        return false
      }
    })
  }
}



</script>

<style scoped lang="less">

.login-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 400px;
    .qr-section {
      flex: 2;
      text-align: center;

      .qr-placeholder {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        margin: 0 auto 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #999;
      }

      p {
        font-size: 14px;
        color: #666;
      }
    }

    .form-section {
      flex: 3;
      height: 100%;
      width: 100%;
      padding-top: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;

      .login-form-box{
        margin-top: 20px;
        width: 80%;

        &-input-group {
          width: 100%;
          //height: 100px;
          padding: 10px;
          border:1px solid rgba(0,0,0,0.2);
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;

          .el-divider--horizontal{
            margin: 10px 0;
          }
          .el-form-item{
            margin-bottom: 0;
          }
          // 去除input边框
          :deep(.el-input__wrapper){
            box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
            cursor: default;
            .el-input__inner {
              cursor: default !important;
            }
          }
        }
      }

      .form-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;

        .el-button {
          width: 48%;
        }
      }

      .other-login {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 20px;
        font-size: 14px;
        color: #666;

        .iconfont {
          margin-left: 20px;
          font-size: 24px;
          cursor: pointer;
          color: #999;

          &:hover {
            color: #409EFF;
          }
        }
      }
    }
  }
</style>
